<template>
	<view class="yang_zhi_detail_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center">
			<text class="title vertical_text mn fs_36_i color_fff fw_500">ᠲᠡᠵᠢᠭᠡᠨ ᠦᠷᠡᠵᠢᠭᠦᠯᠬᠦ ᠳᠠᠩᠰᠠ ᠡᠪᠬᠡᠮᠡᠯ᠎ᠦᠨ ᠨᠠᠷᠢᠨ ᠪᠠᠢᠳᠠᠯ</text>
			
			<view class="add_btn" v-if="activeIndex == 0">
				<i class="iconfont icon-bianji1 color_fff fs_40_i" @click="updateYangZhiDetail()"></i>
			</view>
		</view>
		
		<view class="content_box">
			<!-- tab -->
			<view class="tab_box">
				<view class="item ji_ben" :class="{ active_tab : activeIndex == 0 }" @click="selectMenu('0')">
					<text class="text vertical_text mn fs_36_i">ᠦᠨᠳᠦᠰᠦᠨ ᠪᠠᠢᠳᠠᠯ</text>
				</view>
				<view class="item fang_yi" :class="{ active_tab : activeIndex == 1 }" @click="selectMenu('1')">
					<text class="text mn vertical_text fs_36_i">ᠬᠢᠵᠢᠭ ᠰᠡᠷᠭᠡᠢᠯᠡᠬᠦ ᠪᠠᠢᠳᠠᠯ</text>
				</view>
				<view class="item zhi_liao" :class="{ active_tab : activeIndex == 2 }" @click="selectMenu('2')">
					<text class="text mn vertical_text fs_36_i">ᠡᠮᠴᠢᠯᠡᠭᠡᠨ᠎ᠦ ᠪᠠᠢᠳᠠᠯ</text>
				</view>
			</view>
			
			<swiper class="swiper_box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="300" :current="activeIndex" @change="swiperChange">
				<swiper-item>
					<view class="swiper_item_box">
						<Yang-zhi-info :yangZhiDetailData="yangZhiDetailData" />
					</view>
				</swiper-item>
				
				<swiper-item>
					<view class="p_20">
						<fang-yi-info :breedingId="breedingId" />
					</view>
				</swiper-item>
				
				<swiper-item>
					<view class="p_20">
						<zhi-liao-info :breedingId="breedingId" />
					</view>
				</swiper-item>
			</swiper>
		</view>
	
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	import yangZhiInfo from '@/compoents/yang-zhi-info.vue'
	import fangYiInfo from '@/compoents/fang-yi-info.vue'
	import zhiLiaoInfo from '@/compoents/zhi-liao-info.vue'
	
	export default {
		mixins: [getSystemInfo],
		components: { yangZhiInfo, fangYiInfo, zhiLiaoInfo },
		data() {
			return {
				breedingId: null,
				activeIndex: 0,
				yangZhiDetailData: {}
			}
		},
		onLoad(options) {
			this.breedingId = options.id
			
			// 获取设备高度
			this.getSystemHeight()
			this.getYangZhiDetailData(options.id)
		},
		methods: {
			// 获取养殖档案详情
			getYangZhiDetailData(id) {
				NET.request(API.getYangZhiInfo, { id }, 'GET')
				.then(res => {
					if (res.code == 200) {						
						this.yangZhiDetailData = res.data
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})
				})
			},
			
			// 点击菜单
			selectMenu(val) {
				this.activeIndex = val
			},
			
			// 监听轮播图切换
			swiperChange(e) {
				this.activeIndex = e.detail.current
			},
			
			// 跳转到 修改养殖档案详情 页面
			updateYangZhiDetail() {
				uni.navigateTo({
					url: `/subcontract/yang-zhi-dang-an/update-yang-zhi?id=${this.breedingId}`,
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.active_tab { border-bottom: 8rpx solid #ffa500; }
	
	.yang_zhi_detail_box {
		width: 100%;
		// border: 1px solid #f00;
		box-sizing: border-box;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			background-color: #1c9aa0;
			box-sizing: border-box;
			position: relative;
			float: left;
			
			.title { font-weight: 500 !important; }
			.add_btn {
				width: 100%;
				height: 50rpx;
				position: absolute;
				bottom: 30rpx;
			}
		}
		
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			overflow-y: auto;
			float: left;
			// padding: 10rpx 0;
			box-sizing: border-box;
			// border: 1px solid #090;
			
			.tab_box {
				width: 100%;
				height: 150rpx;
				box-sizing: border-box;
				overflow: hidden;
				padding: 10rpx 20rpx 0;
				position: sticky;
				top: 0;
				left: 90rpx;
				// border: 1px solid #f00;
				background-color: #fff;
				z-index: 999;
				text-align: center;
				
				.ji_ben, .fang_yi, .zhi_liao {
					// float: left;
					height: 130rpx;
					text-align: center;
				}
				
				.item {
					float: left;
					margin-right: 40rpx;
				}
			}
			
			.swiper_box {
				width: 100%;
				height: calc(100% - 150rpx);
				overflow-y: auto;
				
				swiper-item {
					width: 100%;
					height: 100%;
					// overflow-y: auto;
					
					.swiper_item_box {
						width: 100%;
						height: 100%;
						padding-bottom: 20rpx;
						box-sizing: border-box;
					}						
				}	
			}
		}
	}	
</style>